/**
 * 入口
 */
("use strict");
layui.define(["element", "binder", "vform", "vtable"], function (exports) {
  let source = [];
  for (var i = 0; i < 24; i++) {
    let s = i < 10 ? "0" + i : "" + i;
    source.push({ name: s + "时", id: i });
  }
  const DEFAULT_LIST = [
    { name: "张三", age: 18, sex: 0 },
    { name: "张3", age: 19, sex: 0 },
    { name: "张33", age: 38, sex: 1 },
  ];
  let opt = {
    el: "#main",
    data: {
      insert: {
        msg: "插入值 value",
        attr: "插入属性 attr",
      },
      event: {
        index: 1,
      },
      form: {
        name: "张三",
        age: 18,
        hobby: "",
        six: "",
        hour: [],
      },
      user: {
        test: [],
      },
      layui: {
        hobbys: [
          { id: 1, name: "打篮球" },
          { id: 2, name: "游泳" },
        ],
        source: source,
      },
    },
    computeds: {
      condition() {
        return this.event.index % 2 == 0;
      },
    },
    methods: {
      submitForm() {
        // 重写了表单检验的方法
        if (!this.verifyForm()) return false;
        console.log(JSON.stringify(this.form));
      },
    },
    components: {
      mytable: {
        // 既可以是String 也可以是配置对象
        data: function () {
          return {
            tableForm: {
              startTime: "",
              endTime: "",
            },
            page: {
              alias: "测试表格数据",
              // submitUrl: "your --- url",
              tableFilter: "my-table",
              tableAlias: "测试表格数据",
              tableOffset: 68,
              tableRender: true,
            },
            layui: {
              table: {
                loading: true,
                id: "{{page.tableFilter}}",
                // url: "{{page.submitUrl}}",
                head: "{{tableHead}}",
                text: "{{tableText}}",
                height: "{{tableHeightMultiple}}",
                limit: "{{tableLimitMultiple}}",
                done: "{{afterTableRender}}",
              },
            },
          };
        },
        methods: {
          initTable() {
            this.renderListPage.call(this, this.page.tableFilter, 1, {
              render: true,
              data: DEFAULT_LIST,
              height: this.tableHeightMultiple(),
              limit: this.tableLimitMultiple(),
            });
          },
          afterTableRender(res, curr, count) {
            if (this.page.tableRender && count > 0) {
              console.log(
                "表格渲染完毕!  res:" +
                  res +
                  "  curr:" +
                  curr +
                  "  count:" +
                  count
              );
              this.page.tableRender = false;
            }
          },
          look(data) {
            console.log("表格数据:" + JSON.stringify(data));
          },
        },
        mounted() {
          let that = this;
          that.initTable();
          layui.table.on("tool(my-table)", function (obj) {
            that[obj.event] && that[obj.event](obj.data);
          });
        },
        template: `
                <div>
                  <div class="layui-form-pane" lay-filter="my-table-form" v-form="tableForm">
                    <div class="layui-form-item">
                      <div class="layui-inline">
                        <label class="layui-form-label">时间:</label>
                        <div class="layui-input-inline" lay-date>
                          <input type="text" autocomplete="off" class="layui-input" name="startTime" lay-filter="startTime" laydate placeholder="请选择" />
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" lay-date>
                          <input type="text" autocomplete="off" class="layui-input" name="endTime" lay-filter="endTime" laydate placeholder="请选择" />
                        </div>
                      </div>
                      <div class="layui-inline">
                        <button class="layui-btn" type="button" @click="initTable" >刷新</button>
                      </div>
                    </div>
                    <table class="layui-table" id="my-table" lay-filter="my-table" v-table="layui.table" style="margin: 0;">
                      <col title="序号" width="60" lay-align="center" type="numbers" />
                      <col title="名称" minWidth="160" lay-field="name" />
                      <col title="年龄" minWidth="160" lay-field="age"/>
                      <col title="性别" width="120" lay-field="sex" lay-templet = "{{d.sex == 0 ? '男' : '女'}}" />
                      <col lay-bar="table-toolbar" />
                    </table>
                  </div>
                  <script v-pre type="text/html" id="table-toolbar">
                    <div class="layui-btn-group">
                      <a class="layui-btn layui-btn-sm" lay-event="look">查看</a>
                    </div>
                  </script>
                </div>
              `,
      },
    },
    mounted() {
      let that = this;
      layui.element.on("tab(all-page)", function (data) {
        // that.$children[0].initTable();
        that.mytable.initTable();
      });
    },
  };
  MAIN_VIEW = layui.binder(opt);
  exports("index", {});
});
